<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../../js/react17/react.development.js"></script>
    <!-- 用于支持react操作DOM -->
    <script type="text/javascript" src="../../js/react17/react-dom.development.js"></script>
    <!-- 用于将jsx转为js -->
    <script type="text/javascript" src="../../js/react17/babel.min.js"></script>
    <!-- 用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../../js/react17/prop-types.js"></script>
</head>
<body>
    <div id="point-loc"></div>
    <div id="block" onmouseover="start()" onmouseout="stop()"></div>

    <script type="text/javascript">
      // 定时器事件
      var t
      // 鼠标移入
      function start(){
        // 启动计时器
        t = setTimeout(()=>{
          alert("停留了3秒！")
        },3000)
      }
      // 鼠标移出
      function stop(){
        clearTimeout(t);
      }
      // 鼠标位置
      document.onmousemove = function(e){
        var loc = "当前位置 x:"+e.pageX+",y:"+e.pageY
        document.getElementById("point-loc").innerHTML = loc;
      }
    </script>
</body>
<style>
  #block{
    border-width: 3px;
    border-color: rgb(5, 0, 75);
    border-style: solid;
    width: 150px;
    height: 150px;
  }
</style>
</html>